<script setup lang="ts">
import {
  Button, Grid, GridItem, Icon, Loading,
} from 'vant';
import { onMounted } from 'vue';

import useUserStore from '@/stores/user.store';

import useTransaction from '../hooks/useTransaction';

const userStore = useUserStore();
const {
  userFlow, fetchSummary,
} = useTransaction();

onMounted(async () => {
  await userStore.fetchUserInfo();
  await fetchSummary();
});
</script>

<template>
  <Grid :column-num="2" :border="false">
    <GridItem>
      <div class="balance-box"
        v-if="!userFlow.loading">
        <div class="balance-label">账户余额</div>
        <div class="balance-value">
          {{ userStore.userInfo.balance || 0.00 }}
          ￥
        </div>
      </div>
      <Loading type="spinner"
        v-if="userFlow.loading" />
    </GridItem>
    <GridItem>
      <Button type="primary" block
        class="withdraw-btn"
        :loading="userFlow.loading"
        @click="$router.replace({ name: 'WithdrawAction' })">
        <Icon name="cash-back-record" />
        立即提现
      </Button>
    </GridItem>
  </Grid>
</template>

<style lang="less" scoped>
.balance-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px 0;

  .balance-label {
    font-size: 14px;
    color: #999;
  }

  .balance-value {
    font-size: 24px;
    color: #333;
    margin-top: 10px;
  }
}

.withdraw-btn {
  height: 100%;
  font-size: 16px;
  color: #fff;
  border-radius: 0;
}
</style>
